<template>
	<view class="item" @click="wareDetail()">
		<image :src="item.show ? item.itemBanner[0] : tempImage" @error="imageError()" lazy-load></image>
		<view style="padding-left: 10rpx; padding-right: 10rpx;">
			<view class="list_item_title">
				<text class="iconfont icon-taobao"
					style="font-size: 42rpx;color:#fc8848 ;position: absolute;"></text>
				<text style="margin-left: 46rpx;">{{item.itemTitle}}</text>
			</view>
			<!-- <view class="list_item_store">{{item.store}}</view> -->
			<view class="list_item_store">
				<text class="iconfont icon-dianpu"
					style="font-size: 24rpx;margin-right: 4rpx;"></text>
				<text>
					{{item.shopName}}
				</text>
			</view>
			<view class="list_item_mid">
				<view class="detail_ticket">
					<view class="ticket_box">
						<view class="dotted"></view>
						<text class="tick_cicle left_cicle"></text>
						<text style="width: 34rpx; height: 100%;">券</text>
						<text style="height: 100%;margin-left: 10rpx;">{{item.ticket}}元</text>
						<text class="tick_cicle right_cicle"></text>
					</view>
				</view>
				<view class="list_item_num">月销{{item.saleMonthV2}}</view>
			</view>
			<!-- <view class="list_item_price"></view> -->
			<view class="list_item_price">
				<text class="cerrent_price">
					<text style="font-size: 26rpx;">券后</text>
					<text style="font-size: 36rpx;">{{item.itemVoucherPrice}}</text>
				</text>
				<text class="old_price">{{item.itemPrice}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
					tempImage: '../../static/images/image.png'
			}
		},
		methods: {
			wareDetail() {
				this.$emit('wareDetail',this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>

		.item {
	// 		width: 48%;
			// height: 400rpx;
	// 		background-color: #ffffff;
	// 		margin-bottom: 30rpx;
	// 		border-radius: 20rpx;
	// 		padding-bottom: 10rpx;
	
			image {
				width: 100%;
				height: 350rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
			
	
				.list_item_title {
					// height: 80rpx;
					line-height: 42rpx;
					// background-color: pink;
					letter-spacing: 3rpx;
					font-weight: 700;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					overflow: hidden;
					-webkit-box-orient: vertical;
				}
				.list_item_store {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 24rpx;
					color: #8B8989;
								
				}
	
				.list_item_mid {
					display: flex;
					justify-content: space-between;
					.detail_ticket {
						
						display: inline-block;
						// width: 120rpx;
						height: 40rpx;
						background-color: #FF6347;
						color: #FFFFFF;
						margin-top: 10rpx;
									
						line-height: 40rpx;
									
						.ticket_box {
							width: 100%;
							font-size: 20rpx;
							height: 100%;
							position: relative;
							padding-left: 10rpx;
							padding-right: 10rpx;
									
							.dotted {
								position: absolute;
								left: 44rpx;
								top: 50%;
								margin-top: -12.5%;
								width: 2rpx;
								height: 70%;
								background-color: #DBDBDB;
							}
									
							.tick_cicle {
								position: absolute;
								width: 14rpx;
								height: 14rpx;
								top: 50%;
								margin-top: -7rpx;
								border-radius: 50%;
								background-color: #FFFFFF;
							}
									
							.left_cicle {
									
								left: -10rpx;
							}
									
							.right_cicle {
								right: -10rpx;
									
							}
									
							text {
								display: inline-block;
								text-align: center;
									
							}
									
						}
					}
					.list_item_num {
						width: 50%;
						text-align: right;
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #8B8989;
					}
				}
			
	
			
				.list_item_price {
					margin-top: 10rpx;
					height: 50rpx;
					line-height: 50rpx;
			
					// background-color: pink;
					.cerrent_price {
						color: #EE4000;
						font-weight: 700;
					}
			
					.old_price {
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						text-decoration: line-through;
						color: #949494;
					}
				}
			}
	
</style>
